<template>
    <div class="release_box animated fadeInUp">
        <titles>
            <template v-slot:project_ri>
                <li class="project_right">
                    <button @click="goback">
                        返回
                    </button>
                </li>
            </template>
        </titles>
        <div class="comment">
            <p>发布内容</p>
            <div class="comment_box">
                <input placeholder="请输入发布标题" v-model="title" type="text">
                <textarea placeholder="请输入评论内容" v-model="contents"></textarea>
                <div>
                    <el-upload v-model:file-list="fileList" action="http://kaoshiguanli.haimijiaoyu.com/api/common/upload" :data="{ type: 'image' }"
                        list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        添加图片
                    </el-upload>

                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </div>

            </div>
            <button @click="submit">发布评论</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import axios from "axios";
import titles from './title.vue'
import { useRouter } from 'vue-router'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ref, reactive } from 'vue'
const router = useRouter()
const goback = () => {
    router.back()
}
const fileList = ref<UploadUserFile[]>([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const title = ref('')
const contents = ref('')

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}
const submit = () => {
    if(localStorage.getItem('userType') == 1 || localStorage.getItem('userType') == 2){
		var imgList = []
		fileList.value.forEach(element => {
		    imgList.push(element.response.data.video_url)
		});
		let data = {
		    username: localStorage.getItem('username'),
		    art_img: imgList.join(','),
		    title: title.value,
		    content: contents.value
		}
		if (!data.title) {
		    ElMessage.error('请输入发布标题！')
		    return
		}
		if (!data.content) {
		    ElMessage.error('请输入发布内容！')
		    return
		}
		axios({
		    url: '/Article/arcitle_add',
		    baseURL: 'http://kaoshiguanli.haimijiaoyu.com/api/',
		    method: 'post',
		    data
		}).then(res => {
		    // list.value = res.data.data
		    ElMessage({
		        message: '发布成功！',
		        type: 'success',
		    })
		    router.back()
		})
	}else{
		ElMessage.error('只有教师和学生可以发布！敬请谅解！')
		return
	}
	
    
    // Article/arcitle_add
}
</script>

<style lang="scss" scoped>
@media screen and (min-width:1200px) {
    .project_right {
        button {
            padding: 5px 25px;
            font-size: 16px;
            color: #FFFFFF;
            background-color: #FF9933;
            border-radius: 25px;
            border: none;
            display: flex;
            align-items: center;
        }
    }

    .release_box {
        width: 100%;
        background-color: #FAFAFA;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 500px;

        .comment {
            margin: 0 auto;
            width: 1000px;
            min-height: 140px;
            background: #FFFFFF;
            border-radius: 10px 10px 10px 10px;
            padding: 15px 15px 60px 15px;
            display: flex;
            flex-direction: column;
            align-items: center;

            p {
                width: 970px;
                height: 40px;
                font-size: 25px;
                font-weight: 600;
                color: #333333;
                margin-bottom: 30px;
            }

            .comment_box {
                background-color: #F3FCFF;
                padding-bottom: 60px;

                input,
                textarea {
                    width: 970px;
                    background-color: rgba(0, 0, 0, 0);
                    font-size: 14px;
                    font-weight: 400;
                    color: #666666;
                    padding: 0 15px;
                    overflow: hidden;
                    // resize:none;
                    border: none;
                    outline: medium;
                    margin-bottom: 15px;
                }

                input {
                    line-height: 47px;
                    border-bottom: 20px solid #FFFFFF;
                }

                textarea {
                    line-height: 40px;
                    min-height: 100px;
                }

                :deep(.el-upload-list--picture-card) {
                    margin-left: 18px;
                }

                :deep(.el-upload-list__item),
                :deep(.el-upload--picture-card) {
                    width: 100px;
                    height: 100px;
                }
            }

            button {
                width: 116px;
                height: 35px;
                background: #FF9933;
                border-radius: 35px;
                // position: absolute;
                bottom: 15px;
                right: 15px;
                border: none;
                font-size: 14px;
                font-weight: 600;
                color: #FFFFFF;
                margin-top: 50px;
            }
        }
    }

}

@media screen and (max-width: 1200px) {
    .project_right {
        button {
            padding: 0.5vw 3vw;
            font-size: 2.13vw;
            color: #FFFFFF;
            background-color: #FF9933;
            border-radius: 3vw;
            border: none;
            display: flex;
            align-items: center;
        }
    }

    .release_box {
        width: 100%;
        background-color: #FAFAFA;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 4vw;
        min-height: 61vh;

        .comment {
            margin: 0 auto;
            width: 90vw;
            // min-height: 140px;
            background: #FFFFFF;
            border-radius: 1vw;
            padding: 2vw 2vw 6vw 2vw;
            display: flex;
            flex-direction: column;
            align-items: center;

            p {
                width: 86vw;
                font-size: 3vw;
                font-weight: 600;
                color: #333333;
                margin-bottom: 4vw;
            }

            .comment_box {
                background-color: #F3FCFF;
                padding-bottom: 6vw;

                input,
                textarea {
                    width: 86vw;
                    background-color: rgba(0, 0, 0, 0);
                    font-size: 1.8vw;
                    font-weight: 400;
                    color: #666666;
                    padding: 0 2vw;
                    overflow: hidden;
                    // resize:none;
                    border: none;
                    outline: medium;
                    margin-bottom: 2vw;

                }

                input {
                    line-height: 7vw;
                    border-bottom: 2.5vw solid #FFFFFF;
                }

                textarea {
                    line-height: 5vw;
                    min-height: 14vw;
                }



                :deep(.el-upload-list--picture-card) {
                    li,
                    div {
                        width: 15vw;
                        height: 15vw;
                        margin: 2vw;
                        font-size: 1vw;
                    }
                }
            }

            button {
                padding: 1vw 3vw;
                background: #FF9933;
                border-radius: 35px;
                bottom: 2vw;
                right: 2vw;
                border: none;
                font-size: 1.8vw;
                font-weight: 600;
                color: #FFFFFF;
                margin-top: 4vw;
            }
        }
    }

}
</style>